Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.
In this article, we’ll look at some solutions to common JavaScript problems.
Error: Request Entity Too Large in Express Apps
We get the request entity too large error in our Express apps if we make a request that exceeds the allowable size limit.
To adjust the limit, we can write:
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb' }));
We have the limit property that lets us set the max size for a request.
json sets the max size of a JSON request.
urlencoded sets the same for URL encoded requests.
React Parse Error: Adjacent JSX Elements Must be Wrapped in an Enclosing Tag
We can’t have multiple elements at the top level in a React component.
To make sure that’s not the case, we can wrap them around a fragment or a root element.
For instance, we can write:
return (
<div>
<Comp1 />
<Comp2 />
</div>
)
to wrap Comp1 and Comp2 around a div.
We can use fragments as follows:
return (
<>
<Comp1 />
<Comp2 />
</>
)
or:
`return (
<`React.Fragment`>
<Comp1 />
<Comp2 />
</`React.Fragment`>
)`
They’re both the same.
Fragments are wrapper components that don’t render an element.
Check if a Selector Matches Something in jQuery
We can check the length property of the jQuery object to see if anything has the given selector.
For instance, we can write:
if ($(selector).length ) {
//...
}
We check if there are any elements with the given selector exist.
If there’s nothing, the length is 0. Otherwise, then length is bigger than 0.
Run JavaScript Function when the User Finishes Typing Instead of on Key Up
We can delay the key up handler by using the debounce method from Underscore or Lodash.
For instance, we can write:
$('#input-box').keyup(_.debounce(callback, 500));
We call the debounce function with our callback and the delay in milliseconds.
Looping Through Array and Removing Items, Without Breaking the for Loop
To loop through an array and remove items, we can use the while loop to loop through an item in reverse.
For example, we can write:
let i = arr.length;
while (i--) {
// ...
if (...) {
arr.splice(i, 1);
}
}
We use the while loop with the index going down from the length to 0.
0 is falsy, so it’ll break when it’s 0.
In the body, we call splice to remove the item with the given index.
Looping backward ensures that reindexing doesn’t affect the next item of the iteration.
Reindexing only affects the items from the current point to the end of the array.
Another way to do the same thing in a shorter way is to use the filter method:
arr = arr.filter((el) => {
return el.seconds > 0;
});
Then we return an array with the seconds property bigger than 0.
We then assign that as the new value of arr .
Listening for Variable Changes in JavaScript
We can use a proxy object to listen for variable changes.
For instance, we can write:
const targetObj = {};
const targetProxy = new Proxy(targetObj, {
set(target, key, value) {
console.log(key, value);
target[key] = value;
return true;
}
});
We create a new Proxy instance that has the set method to listen to the key and value as it’s assigned to targetObj .
Then when we assign properties to the proxy:
targetProxy.foo = "bar";
the set method will be called.
trim() Method in JavaScript not working in IE
The string instance’s trim method isn’t available in IE.
Therefore, we’ve to add it ourselves.
For instance, we can write:
if (typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^s+|s+$/g, '');
}
}
We check if the trim instance is a function or not, then we set it to our function if it’s not.
Conclusion
We can add the trim method to IE with a small polyfill.
The max of a request in Express can be changed.
We can use React fragments as wrapper elements that render nothing.
If we loop through an array backwards, then reindexing won’t affect the loop since it’s only applied to items from the given index to the end.
